import React from 'react';
import { totalConfig, propName } from 'config/templateConfig'

let latticeConfig = totalConfig.lattice;

export default React.createClass({
    getInitialState() {
        return { maxHp: 100, hp: 100 }
    },
    componentDidMount() {
        let opts = this.props.opts, self = this;
        let latticeId = opts.latticeId;
        let latticeInfo = latticeConfig[latticeId];
        this.timer = setInterval(function () {
            if (self.state.hp > 0) {
                self.state.hp += 3
                if (self.state.hp > self.state.maxHp) {
                    self.state.hp = self.state.maxHp
                }
                self.setState({ hp: self.state.hp })
            } else {
                self.setState({ hp: 0 })
                clearInterval(self.timer)
                self.timer = null
            }
        }, 1000);
    },
    componentWillUnmount() {
        if (this.timer) {
            clearInterval(this.timer)
            this.timer = null;
        }
    },
    collection() {
        this.state.hp -= 10;
        if (this.state.hp < 0) {
            this.state.hp = 0;
        }
        this.setState({ hp: this.state.hp })
    },
    render() {
        return <div>
            <div className="text-center">{this.state.hp}/{this.state.maxHp}</div>
            <div className="flex jc-center"><button onClick={this.collection}>采集</button></div>
        </div>
    }
})